/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="user-resource-gpu-wrap">
        <div class="user-resource-gpu__top">
            <header>
                <span class="title">
                    <lang>资源使用趋势图</lang>
                </span>
            </header>
            <div class="line-charts-wrap">
                <trend ref="trend" :type-prop="type" :time-prop="time"></trend>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.user-resource-gpu-wrap {
    width: 100%;
    height: 460px;
    position: relative;
    margin-top: 21px;
    padding: 15px 0 30px 30px;
    background-color: #fff;
    border-radius: 6px;

    .title {
        font-size: 14px;
        color: #14161A;
        font-weight: bold;
    }

    .user-resource-gpu__top {
        border-radius: 6px;
        height: 100%;
    }


    .line-charts-wrap {
        height: 100%;
    }
}
</style>

<script>
import Trend from './trend';

export default {
    components: {
        Trend
    },
    data() {
        return {
            type: '',
            time: ''
        };
    },


    methods: {

        enlargeLine() {

            let trendRef = this.$refs.trend;
            let type = trendRef.type;
            let time = trendRef.time;

            let trendWin = this.$modal(Trend, {
                title: '资源使用趋势图',
                autoDestory: true,
                buttons: [
                    {
                        actionName: 'cancel',
                        text: '取消'
                    }
                ]
            });
            trendWin.open({
                data: {
                    lineWidht: 1000,
                    lineHeight: 400,
                    xShow: true,

                    type: type,
                    time: time
                },
                cancel: () => {

                    let formRoot = trendWin.formRoot;
                    this.time = formRoot.time;
                    this.type = formRoot.type;

                }
            });
        }
    }

};
</script>


